<template>
    <div class="circle-container">
        <div class="cont">
            <div class="search-box">
                <el-form :model="searchForm" inline>
                    <el-form-item label="订单编号">
                        <el-input v-model="searchForm.id" placeholder="输入要查询的订单编号" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="searchForm.phone" placeholder="输入要查询的手机号" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleSearch" type="primary" icon="el-icon-search" size="mini">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button @click="batchDelIds.length >= 1 ? showBatchDel = true : showBatchDel = false" class="del-btn"
                    size="mini">删除选中</el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="id" label="订单编号">
            </el-table-column>
            <el-table-column prop="name" label="患者姓名">
            </el-table-column>
            <el-table-column prop="department" label="挂号科室">
            </el-table-column>
            <el-table-column prop="further" label="是否为复诊">
            </el-table-column>
            <el-table-column label="是否自我申报48小时核酸" width="200px">
                <template slot-scope="{row}">
                    {{ row["48report"] == 1 ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column label="订单操作">
                <template slot-scope="{row}">
                    <i @click="handleEdit(row)" class="el-icon-document" style="margin-right:10px;color:#66b1ff"></i>
                    <i @click="handleDel(row)" class="el-icon-delete" style="color:#66b1ff"></i>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[15, 20, 25, 30]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="挂号详情" :visible.sync="showDetails">
            <el-form :model="detailsForm" label-width="100px">
                <el-form-item label="订单编号">
                    <el-input v-model="detailsForm.id" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="挂号时间">
                    <el-input v-model="detailsForm.regtime" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="患者姓名">
                    <el-input v-model="detailsForm.name" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="是否为复诊">
                    <el-input v-model="detailsForm.further" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="48H核酸报告">
                    <el-input v-model="detailsForm['48report']" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="挂号科室">
                    <el-input v-model="detailsForm.department" size="mini" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="detailsForm.phone" size="mini" disabled></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDetails = false" style="background:#728cb2;color:#fff" size="mini">取 消
                </el-button>
                <el-button type="primary" @click="showDetails = false" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="系统提示" :visible.sync="showDel" width="30%">
            <span>你正在删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirmDel" size="mini">确定删除</el-button>
                <el-button @click="showDel = false" style="background:#728cb2;color:#fff" size="mini">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="系统提示" :visible.sync="showBatchDel" width="30%">
            <span>你正在批量科室删除删除用户挂号信息，此操作不可逆，删除后患者需要重新挂号，确定删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirmBatchDel" size="mini">确定删除</el-button>
                <el-button @click="showBatchDel = false" style="background:#728cb2;color:#fff" size="mini">取 消
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { api_register_list, api_register_getbyid, api_register_del, api_register_batchdel,api_register_search } from "@/apis/hospitalRegisterController";
import formatTime from "@/utils/formatTime";
export default {
    data() {
        return {
            searchForm: {
                id:null,
                phone: "",
            },
            page: 1,
            size: 10,
            total: 10,
            showDetails: false,
            showDel: false,
            showBatchDel: false,
            delId: 0,
            batchDelIds: [],
            detailsForm: {
                regtime: "",
                id: 17,
                name: "张智",
                department: "呼吸内科",
                further: "",
                '48report': "",
                phone: ""
            },
            currentPage: 1,
            // 48report: 1
            // department: "内科"
            // further: "初次挂号"
            // id: 1
            // name: "黎明全"
            tableData: [],
            directors: [{ id: 1, name: "张智" }]
        }
    },
    created() {
        this.getRegisterList()
    },
    methods: {
        // 获取挂单号列表
        async getRegisterList() {
            let res = await api_register_list({ page: this.page, size: this.size })
            // console.log(res.data.data);
            this.tableData = res.data.data
            this.total = res.data.total
        },
        //复选框状态改变
        handleSelectionChange(val) {
            this.batchDelIds = val.map(item => item.id)
        },
        // 批量删除选中
        async handleConfirmBatchDel() {
            let ids = JSON.stringify(this.batchDelIds)
            let res = await api_register_batchdel({ ids })
            if (res.data.code == 1) {
                this.getRegisterList()
            }
            this.showBatchDel = false
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.size = val
            this.getRegisterList()
        },
        // 切换当前页
        handleCurrentChange(val) {
            this.page = val
            this.getRegisterList()
        },
        // 删除
        handleDel(row) {
            this.showDel = true
            this.delId = row.id
        },
        // 确认删除
        handleConfirmDel() {
            this.showDel = false
            api_register_del({ id: this.delId })
            this.getRegisterList()
            // console.log(this.delId);
        },
        // 查看挂号详情
        async handleEdit(row) {
            let id = row.id
            let res = await api_register_getbyid({ id })
            // console.log(res.data.data);
            let result = res.data.data[0]
            result.regtime = formatTime(result.regtime)
            this.detailsForm = result
            this.showDetails = true;
        },
        //查询
        async handleSearch() {
            let res = await api_register_search({ page: this.page, size: this.size,id:Number(this.searchForm.id),phone:this.searchForm.phone })
            this.tableData = res.data.data
        }
    }
}
</script>

<style lang="less" scoped>
.circle-container {
    width: 100%;
    height: 100%;

    .cont {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-input {
                width: 200px;
            }
        }
    }

    .el-table {
        border: 1px solid #eee;

        th.el-table__cell {

            background-color: #f2f6fc;

        }
    }

    .el-pagination {
        margin-top: 20px;
    }
}
</style>